<template>
    <uni-popup @change="popupChange" background-color="#fff" type="bottom" ref="popupRef">
        <view class="content" @click="closePopup">
            <view class="horizontal-text">{{ data.targetText }}</view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        default: { targetText: '' }
    }
});
//弹窗实例
const popupRef: any = ref(null);
onMounted(() => {
    popupRef.value.open();
});

const emit = defineEmits(['close']);
const popupChange = (val: any) => {
    if (!val.show) {
        emit('close');
    }
};
const closePopup = () => {
    popupRef.value.close();
};
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.horizontal-text {
    position: absolute;
    width: 70vh;
    font-size: 150rpx;
    line-height: 1.3em;
    text-align: center;
    transform: rotate(90deg);
}
</style>
